<template>
  <view class="vip-page">
    <!-- 会员卡区域 -->
    <view class="vip-card">
      <u-avatar :src="user.avatar" size="80"></u-avatar>
      <view class="u-font-18 u-m-t-10">{{ user.name }}</view>
      <view class="vip-level-tag">VIP {{ user.level }}</view>

      <view class="info-box u-flex u-row-around u-m-t-30">
        <view class="info-item">
          <view class="info-value">{{ user.growth }}</view>
          <view class="info-label">成长值</view>
        </view>
        <view class="info-item">
          <view class="info-value">{{ user.coupons }}</view>
          <view class="info-label">优惠券</view>
        </view>
        <view class="info-item">
          <view class="info-value">{{ user.points }}</view>
          <view class="info-label">积分</view>
        </view>
      </view>

      <view class="btn-box u-flex u-row-center u-m-t-30">
        <u-button text="立即续费" type="success" shape="circle" size="medium" color="#49b79d" />
      </view>
    </view>

    <!-- 专属权益 -->
    <view class="u-m-t-40 u-p-l-20 u-p-r-20">
      <view class="u-font-16 u-font-bold u-m-b-20">专属特权</view>
      <view class="u-flex u-flex-wrap">
        <view
          class="privilege-item"
          v-for="(item, index) in privileges"
          :key="index"
        >
          <u-icon :name="item.icon" size="36" color="#49b79d"></u-icon>
          <view class="u-font-14 u-m-t-10">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const user = {
  avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
  name: 'Aimee',
  level: 5,
  growth: 7200,
  coupons: 5,
  points: 1200
}

const privileges = [
  { name: '专属标识', icon: 'star-fill' },
  { name: '订购优惠', icon: 'coupon-fill' },
  { name: '生日礼包', icon: 'gift-fill' },
  { name: '快速通道', icon: 'server-fill' },
  { name: '会员专属日', icon: 'calendar-fill' },
  { name: '积分翻倍', icon: 'integral-fill' }
]
</script>

<style scoped>
.vip-page {
  background-color: #f2fefb;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.vip-card {
  background: #e6f7f0;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.vip-level-tag {
  display: inline-block;
  margin-top: 10rpx;
  padding: 4rpx 20rpx;
  background-color: #49b79d;
  color: white;
  font-size: 12px;
  border-radius: 30rpx;
}
.info-box {
  justify-content: space-around;
}
.info-item {
  text-align: center;
}
.info-value {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}
.info-label {
  color: #999;
  font-size: 12px;
  margin-top: 8rpx;
}
.btn-box {
  margin-top: 20rpx;
}
.privilege-item {
  width: 33.33%;
  text-align: center;
  margin-bottom: 30rpx;
}
</style>
